<template>
    <view class="page flex-col">
        <view class="text-wrapper_2 flex-col">
            <text class="text_4">作业信息</text>
        </view>
        <view class="box_2 flex-col">
            <view class="list_1 flex-col">
                <view class="list-items_1 flex-row justify-between" v-for="(item, index) in loopData0" :key="index">
                    <text class="text_5" v-html="item.name"></text>
                    <view class="text-r" @click="handleOpenPopup(item)">
                        <view>{{ item.tip }}</view>
                        <img src="../img/icon_right_arrows.png">
                    </view>

                </view>
            </view>
            <view class="box_3 flex-col">
                <view class="text-wrapper_3 flex-row">
                    <text class="text_7">班级</text>
                </view>
                <view class="box_4 flex-row">
                    <view class="group flex-row justify-between"
                        :class="{ 'pitch': selectedClassListID.includes(item.class_id) }" v-for="(item,index) in classList"
                        @click="handleClassItemClick(item,index)">
                        <view class="text-group flex-col">
                            <text class="text_1">{{ item.name }}</text>
                            <text class="text_2">{{ item.student_count }}人</text>
                        </view>
                        <image v-show="selectedClassListID.includes(item.class_id)" class="thumbnail"
                            referrerpolicy="no-referrer"
                            src="./img/icon_cancel.png" />
                    </view>
                </view>
            </view>
        </view>
        <view class="text-wrapper_5 flex-col">
            <text class="text_14">作业要求</text>
        </view>
        <view class="box_5 flex-col">
            <view class="list_2 flex-col">
                <view class="list-items_2 flex-col" v-for="(item, index) in loopData1" :key="index">
                    <view class="text-wrapper_6 flex-row justify-between">
                        <!-- <textarea class="text_15" @blur="bindTextAreaBlur" placeholder="请输入作业要求" maxlength="500" /> -->
                        <text class="text_15" v-html="item.name"></text>
                        <text class="text_16" v-html="item.tip"></text>
                    </view>
                    <view class="text-wrapper_7 flex-col">
                        <textarea class="text_17" v-model="item.inputStr" @input="bindTextAreaInput(item)"
                            :placeholder="item.text" maxlength="500" />
                    </view>
                </view>
            </view>
        </view>
        <view class="box_6 flex-col">
            <view class="box_7 flex-row justify-between">
                <view class="block_1 flex-row" @click="goBack">
                    <view class="image-text_1 flex-row justify-between">
                        <image class="thumbnail_7" referrerpolicy="no-referrer"
                            src="../img/left-arrow.png" />
                        <text class="text-group_3">返回</text>
                    </view>
                </view>
                <view class="text-wrapper_8 flex-col" @click="publishHomework">
                    <text class="text_18">发布作业</text>
                </view>
            </view>
        </view>
        <!-- 日期普通弹窗 -->
        <uni-popup ref="popup" class="my-popup" type="bottom" background-color="#fff" borderRadius="12px 12px 0px 0px">
            <view class="popup-content">
                <view class="header">
                    <view>选择时间</view>
                    <view class="close" @click="handleClosePopup">
                        <img src="../img/icon_close.png" alt="" srcset="">
                    </view>
                </view>
                <view>
                    <picker-view :indicator-style="indicatorStyle" :value="selectData.date" class="picker-view"  @change="bindChange">
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
                        </picker-view-column>
                    </picker-view>
                </view>
                <view class="footer" @click="handleOpenTimePopup">
                    <view class="time-title">
                        时间节点
                    </view>
                    <view class="time">
                        <view>
                            {{ selectData.timeStr }}
                        </view>
                        <img src="../img/icon_right_arrows.png">
                    </view>
                </view>
                <view class="btn" @click="handleAffirm">
                    确定
                </view>
            </view>
        </uni-popup>
        <!-- 时间普通弹窗 -->
        <uni-popup ref="timePopup" class="my-popup" type="bottom" background-color="#fff"
            borderRadius="12px 12px 0px 0px">
            <view class="popup-content">
                <view class="header">
                    <view>选择时间</view>
                    <view class="close" @click="handleCloseTimePopup">
                        <img src="../img/icon_close.png" alt="" srcset="">
                    </view>
                </view>
                <view>
                    <picker-view :indicator-style="indicatorStyle" :value="selectData.time" class="picker-view"  @change="bindTimeChange">
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in hours" :key="index">{{ item }}</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}</view>
                        </picker-view-column>
                    </picker-view>
                </view>
                <view class="btn"  @click="handleAffirmTime">
                    确定
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import API from "@/api/teacherapi";
export default {
    name: 'job',
    data() {
        const date = new Date()
        const years = []
        const year = date.getFullYear()
        const months = []
        const month = date.getMonth() + 1
        const days = []
        const day = date.getDate()
        const hours = []
        const minutes = []
        const hour = 0
        const minute = 0
        for (let i = 1990; i <= date.getFullYear(); i++) {
            years.push(i)
        }
        for (let i = 1; i <= 12; i++) {
            months.push(i)
        }
        for (let i = 1; i <= 31; i++) {
            days.push(i)
        }
        for (let i = 0; i <= 23; i++) {
            if(i < 10) {
                hours.push('0' + i)
            }else{
                hours.push(i)
            }
            
        }
        for (let i = 0; i <= 59; i++) {
            if(i < 10) {
                minutes.push('0' + i)
            }else{
                minutes.push(i)
            }
        }
        return {
            title: 'picker-view',
            years,
            year,
            months,
            month,
            days,
            day,
            hours,
            hour,
            minutes,
            minute,
            value: [9999, month - 1, day - 1],
            visible: true,
            indicatorStyle: `height: 50px;`,
            classList: [],
            loopData0: [
                {
                    type:1,
                    name: '开始时间',
                    tip: '请选择',
                    date: [9999, month - 1, day - 1],
                    time: [hour, minute],
                    timeStr:'00:00'
                },
                {
                    type:2,
                    name: '结束时间',
                    tip: '请选择',
                    date: [9999, month - 1, day - 1],
                    time: [hour, minute],
                    timeStr:'00:00'
                },
            ],
            loopData1: [
                {   
                    type:1,
                    name: '作业要求',
                    tip: '0/500',
                    text: '请输入作业要求',
                    inputStr: '',
                },
                {
                    type:2,
                    name: '思考',
                    tip: '0/500',
                    text: '请输入思考内容',
                    inputStr: '',
                },
            ],
            selectedClassListID: [],
            teacher_id: '',
            experiment_id:'',
            begin_date:'',
            end_date:'',
            description:'',
            think:'',
            selectData:{},
        };
    },
    async onLoad(option) {
        console.log(option)
        this.experiment_id = option.experiment_id
        this.getInfo()
        this.getClazzList()
    },
    methods: {
        getInfo() {
            let myProfile = uni.getStorageSync('myProfile')
            console.log(myProfile)
            this.teacher_id = myProfile.user_id
        },
        bindChange: function (e) {
            const val = e.detail.value
            console.log(val)
            this.year = this.years[val[0]]
            this.month = this.months[val[1]]
            this.day = this.days[val[2]]
        },
        bindTimeChange: function (e) {
            const val = e.detail.value
            console.log(val)
            this.hour = this.hours[val[0]]
            this.minute = this.minutes[val[1]]
        },
        handleOpenPopup(item) {
            this.selectData = item
            console.log('this.$refs.popup', this.$refs.popup)
            this.$refs.popup.open()

        },
        handleClosePopup() {
            this.$refs.popup.close()
        },
        handleOpenTimePopup() {
            this.$refs.timePopup.open()
        },
        handleCloseTimePopup() {
            this.$refs.timePopup.close()
        },
        goBack(){
            uni.navigateBack({
                delta: 1
            });
        },
        bindTextAreaInput(item) {
            console.log(item)
            item.tip = item.inputStr.length + '/' + item.tip.split('/')[1]
            if(item.type === 1) {
                this.description = item.inputStr
            }
            if(item.type === 2) {
                this.think = item.inputStr
            }
        },
        handleClassItemClick(item,index) {
            if(this.selectedClassListID.includes(item.class_id)) {
                this.selectedClassListID = this.selectedClassListID.filter(id => id !== item.class_id)
            }else{
                this.selectedClassListID.push(item.class_id)
            }
        },
        //获取班级
        async getClazzList() {
           const res = await API.ClazzPagedList({agrs:{
                pageIndex: 1,
                pageSize: 999,
            }})
            this.classList = res.data
        },
        handleAffirm(){
            console.log(this.selectData)
            this.selectData.tip = this.year + '-' + this.month + '-' + this.day + ' ' + this.selectData.timeStr;
            if(this.selectData.type === 1) {
                this.begin_date = this.year + '-' + this.month + '-' + this.day + ' ' + this.selectData.timeStr;
            }
            if(this.selectData.type === 2) {
                this.end_date = this.year + '-' + this.month + '-' + this.day + ' ' + this.selectData.timeStr
            }
            this.handleClosePopup()
        },
        handleAffirmTime(){
            console.log(this.selectData)
            if(this.selectData.type === 1) {
               this.selectData.timeStr = this.hour + ':' + this.minute
            }
            if(this.selectData.type === 2) {
                this.selectData.timeStr = this.hour + ':' + this.minute
            }
            this.handleCloseTimePopup()
        },
        //发布作业
        async publishHomework() {
            let data = {
                // teacher_id: this.teacher_id,
                experiment_id: this.experiment_id,
                class_id_list: this.selectedClassListID,
                begin_date: this.begin_date,
                end_date: this.end_date,
                description: this.description,
                think: this.think,
            }
            
             const res =  await API.TeacherCreateHomework(data)
              uni.showToast({
                title: '发布成功',
                icon: 'success'
            })
             console.log(res)
             this.goBack()
        },
        
    },
};
</script>
<style>
.popup-content {
    background-color: #fff;
    padding: 48rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .header {
        display: flex;
        justify-content: space-between;
        overflow-wrap: break-word;
        color: rgba(38, 38, 38, 1);
        font-size: 36rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 50rpx;
        margin-bottom: 40rpx;

    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 80rpx;
        background: #F8F8F8;
        border-radius: 24rpx;
        margin-top: 40rpx;
        padding: 0 40rpx;

        .time-title {
            height: 44rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #262626;
            line-height: 44rx;
            text-align: center;
            font-style: normal;
        }

        .time {
            display: flex;
            align-items: center;
            height: 44rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #262626;
            line-height: 44rpx;
            text-align: center;
            font-style: normal;
            margin-right: 8rpx;

            img {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 92rpx;
        background: #2776FF;
        border-radius: 12rpx;
        margin-top: 80rpx;
        margin-bottom: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #FFFFFF;
        text-align: right;
        font-style: normal;
    }

    .picker-view {
        width: 100%;
        height: 400rpx;
        margin-top: 20rpx;
    }

    .item {
        line-height: 100rpx;
        text-align: center;
    }
}



.page {
    background-color: rgba(248, 248, 248, 1);
    position: relative;
    width: 750rpx;
    overflow: hidden;


    .text-wrapper_2 {
        padding: 32rpx 606rpx 26rpx 32rpx;

        .text_4 {
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 48rpx;
        }
    }

    .box_2 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 12px;
        width: 702rpx;
        align-self: center;
        margin-top: -2rpx;
        padding: 0 32rpx 0 32rpx;

        .list_1 {
            height: 256rpx;

            .list-items_1 {
                box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
                background-color: rgba(255, 255, 255, 1);
                padding: 38rpx 6rpx 38rpx 0;

                .text_5 {
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 52rpx;
                }

                .text-r {
                    display: flex;
                    align-items: center;
                    height: 44rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 32rpx;
                    color: #262626;
                    line-height: 44rpx;
                    text-align: center;
                    font-style: normal;
                    margin-right: 8rpx;

                    img {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }

                .text_6 {
                    width: 340rpx;
                    overflow-wrap: break-word;
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 52rpx;
                    margin-left: 220rpx;
                }

                .thumbnail_5 {
                    width: 20rpx;
                    height: 20rpx;
                    margin: 16rpx 0 16rpx 168rpx;
                }
            }
        }

        .box_3 {
            background-color: rgba(255, 255, 255, 1);
            padding: 38rpx 0 38rpx 0;

            .text-wrapper_3 {
                margin-right: 574rpx;

                .text_7 {
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 32rpx;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 52rpx;
                }
            }

            .box_4 {
                margin: 24rpx 24rpx 0 24rpx;
                overflow: hidden;
                overflow-x: auto;

                .pitch {
                    background-color: rgba(245, 248, 255, 1);
                    border-radius: 8px;
                    border: 1px solid rgba(39, 118, 255, 1);
                    padding: 24rpx 42rpx 22rpx 42rpx;
                    margin-right: 18rpx;
                    box-sizing: border-box;
                    position: relative;

                    .text-group {
                        .text_1 {
                            overflow-wrap: break-word;
                            color: rgba(39, 118, 255, 1);
                            font-size: 28rpx;
                            font-family: PingFangSC-Medium;
                            font-weight: 500;
                            text-align: center;
                            white-space: nowrap;
                            line-height: 40rpx;
                        }

                        .text_2 {
                            overflow-wrap: break-word;
                            color: rgba(39, 118, 255, 1);
                            font-size: 24rpx;
                            font-weight: normal;
                            text-align: center;
                            white-space: nowrap;
                            line-height: 32rpx;
                            margin: 8rpx 40rpx 0 42rpx;
                        }
                    }

                    .thumbnail {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 24rpx;
                        height: 24rpx;
                        background-color: rgba(39, 118, 255, 1);
                        border-radius: 8rpx 0rpx 14rpx 0rpx;
                    }
                }

                .group {
                    background-color: rgba(250, 250, 250, 1);
                    border-radius: 8px;
                    margin-right: 24rpx;
                    padding: 24rpx 42rpx 22rpx 42rpx;
                    box-sizing: border-box;

                    .text-group {
                        .text_1 {
                            overflow-wrap: break-word;
                            color: rgba(38, 38, 38, 1);
                            font-size: 28rpx;
                            font-weight: normal;
                            text-align: center;
                            white-space: nowrap;
                            line-height: 32rpx;
                        }

                        .text_2 {
                            overflow-wrap: break-word;
                            color: rgba(38, 38, 38, 1);
                            font-size: 24rpx;
                            font-weight: normal;
                            text-align: center;
                            white-space: nowrap;
                            line-height: 32rpx;
                            margin: 14rpx 40rpx 0 42rpx;
                        }
                    }
                }

                .text-wrapper_4 {
                    background-color: rgba(250, 250, 250, 1);
                    border-radius: 8px;
                    margin-left: 24rpx;

                    .text_12 {
                        width: 54rpx;
                        overflow-wrap: break-word;
                        color: rgba(38, 38, 38, 1);
                        font-size: 24rpx;
                        font-weight: normal;
                        text-align: right;
                        white-space: nowrap;
                        line-height: 32rpx;
                        margin: 72rpx -4rpx 20rpx 100rpx;
                    }
                }

                .text_13 {
                    overflow-wrap: break-word;
                    color: rgba(38, 38, 38, 1);
                    font-size: 28rpx;
                    font-weight: normal;
                    text-align: right;
                    white-space: nowrap;
                    line-height: 32rpx;
                    margin: 24rpx 0 0 -92rpx;
                }
            }
        }
    }

    .text-wrapper_5 {
        padding: 32rpx 606rpx 26rpx 32rpx;

        .text_14 {
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 48rpx;
        }
    }

    .box_5 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 12px;
        align-self: center;
        margin-top: -2rpx;
        width: 702rpx;
        padding: 0 32rpx 0 32rpx;

        .list_2 {
            .list-items_2 {
                box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
                background-color: rgba(255, 255, 255, 1);
                padding: 38rpx 0 38rpx 0;

                .text-wrapper_6 {
                    width: 638rpx;

                    .text_15 {
                        width: 128rpx;
                        overflow-wrap: break-word;
                        color: rgba(0, 0, 0, 1);
                        font-size: 32rpx;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 52rpx;
                    }

                    .text_16 {
                        overflow-wrap: break-word;
                        color: rgba(140, 140, 140, 1);
                        font-size: 28rpx;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 40rpx;
                        margin-top: 12rpx;
                    }
                }

                .text-wrapper_7 {
                    background-color: rgba(248, 249, 251, 1);
                    border-radius: 8px;
                    margin-top: 24rpx;
                    padding: 24rpx;

                    .text_17 {
                        overflow-wrap: break-word;
                        font-size: 32rpx;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 44rpx;
                    }
                }
            }
        }
    }

    .box_6 {
        background-color: rgba(255, 255, 255, 1);
        margin-top: 22rpx;
        padding: 26rpx 32rpx 18rpx 32rpx;

        .box_7 {
            width: 686rpx;

            .block_1 {
                background-color: rgba(255, 255, 255, 1);
                border-radius: 6px;
                border: 1px solid rgba(230, 235, 241, 1);
                padding: 20rpx 22rpx 20rpx 22rpx;

                .image-text_1 {
                    width: 116rpx;

                    .thumbnail_7 {
                        width: 40rpx;
                        height: 40rpx;
                        margin: 4rpx 0 4rpx 0;
                    }

                    .text-group_3 {
                        overflow-wrap: break-word;
                        color: rgba(38, 38, 38, 1);
                        font-size: 34rpx;
                        font-weight: normal;
                        text-align: right;
                        white-space: nowrap;
                        line-height: 48rpx;
                    }
                }
            }

            .text-wrapper_8 {
                background-color: rgba(39, 118, 255, 1);
                border-radius: 6px;
                padding: 22rpx 176rpx 22rpx 178rpx;

                .text_18 {
                    overflow-wrap: break-word;
                    color: rgba(255, 255, 255, 1);
                    font-size: 34rpx;
                    font-family: PingFangSC-Medium;
                    font-weight: 500;
                    text-align: right;
                    white-space: nowrap;
                    line-height: 48rpx;
                }
            }
        }
    }
}
</style>
